<template>
    <div class="about">
        <div ref="chart3" style="width: 100%;height:100%;"></div>
    </div>
</template>
<script>

import * as echarts from 'echarts'

    import {reactive, ref, onMounted} from 'vue'

    export default {
        // 启动函数
        setup() {
            const state = reactive({
                chart3: ref(document.getElementById('main'))

            })

            const init = () => {
                if (state.chart3) {
                    // 图表的初始化
                    let myChart = echarts.init(state.chart3)
                    const option = {
                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [150, 230, 224, 218, 135, 147, 260],
                            type: 'line'
                        }]
                    };

                    /*setInterval(function () {
                        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                        myChart.setOption(option, true);
                    }, 2000);*/
                    // 指定数据项和数据显示
                    myChart.setOption(option);
                }
            }

            onMounted(() => {
                init();
            })

            return state
        }
    }
</script>
